/* eslint-disable */
<template>
  <div class="card">
    <h3>热门电台</h3>

    <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content">
        <li
          v-for="v in hotList"
          :key="v.id"
          @click="$router.push('/radioStation')"
        >
          <div class="cover">
            <div style="position: relative">
              <img class="pic" :src="v.picUrl" />
              <div class="mask">
                <i class="icon">
                  <van-icon name="play-circle-o" color="#fff" size="2rem" />
                </i>
              </div>
            </div>
          </div>
          <div style="font-size: 12px; text-align: center">{{ v.name }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
import { betterScrollHorizontal } from "../../common/betterScroll.js";
export default {
  name: "CloudMusicRadioStation",

  data() {
    return {
      hotList: [],
    };
  },

  mounted() {
    this.$request("get", "/dj/recommend").then(({ djRadios = [] }) => {
      this.hotList = djRadios;
      betterScrollHorizontal(
        this,
        this.$refs.wrapper,
        this.$refs.content,
        this.hotList.length,
        7
      );
    });
  },

  methods: {
    sleep(time) {
      return new Promise((reslove) => {
        setTimeout(reslove, time);
      });
    },
  },
};
</script>

<style scoped>
.card {
  text-align: left;
  padding-left: 1rem;
}
.wrapper {
  margin-top: 0.3125rem;
  width: 100%;
  /* 容器的宽度就是屏幕的宽度 */
  overflow: hidden;
}

.cover {
  display: flex;
  justify-content: center;
  text-align: center;
}

ul.content > li {
  width: 7rem;
  display: inline-block;
  vertical-align: top;
  /**垂直方向的对齐方式 */
}

ul.content > li > span {
  font-size: 0.8rem;
}

.home-classic > h3 {
  text-align: left;
  margin-left: 1rem;
}

.content:first-child {
  padding-left: 0;
}

.home-classic {
  margin-top: 2rem;
}
.pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.7;
}

.icon {
  position: absolute;
  top: 50%;
  z-index: 55;
  left: 50%;
  transform: translate(-50%, -50%);
}
.van-icon {
  z-index: 10 !important;
}
</style>
